// import React, { Component } from 'react'

//  class Control extends Component {
//     constructor(){
//          super();
//          this.state={
//              inpValue:''
//          }
//      }
//     handleChange=(e)=>{
//          this.setState({inpValue:e.target.value})
//      }

//     componentDidMount(){
//          this.input.focus();
//      }

//     render() {
//         return (
//             <div>
//                 <input 
//                 ref={inp=>this.input=inp} 
//                 value={this.state.inpValue} 
//                 type='text' 
//                 onChange={this.handleChange}
//                 />
                
//             </div>
//         )
//     }
// }

// export default Control;








import React, { Component } from 'react'

//组件名首字母大写
class Control extends Component {
    constructor(){
        super();
        this.state={
            inpValue:'',
            todos:[
                {title:'1',done:false},
                {title:'2',done:true},
                {title:'3',done:false},
                {title:'4',done:true},
             ]
        }
    }
    handleChange=(e)=>{
        this.setState({inpValue:e.target.value})
    }

    componentDidMount(){
        this.input.focus();//默认焦点
        let todos = localStorage.getItem('todos');
        if(todos){
            this.setState({
                todos:JSON.parse(todos)
            })
        }
    }

    componentDidUpdate(){
        localStorage.setItem(
            'todos',
            JSON.stringify(this.state.todos)
        )
    }
    addTodo=()=>{
    //    this.state.todos.push({title:this.state.inpValue})
    //    this.setState({
    //        todos:this.state.todos
    //     })
        if(this.state.inpValue){
            this.setState({
                todos:[
                    {
                        title:this.state.inpValue,
                        done:true
                    },
                    ...this.state.todos
                ]
            })
            this.setState({inpValue:''})
        }else{
            alert("不能为空");
        }
    }
    delTodo=(idx)=>{
        //    let newTodos = JSON.parse(JSON.stringify(this.state.tsodos)) //深拷贝
        //    newTodos.splice(idx,1);
        //    this.setState({todos:newTodos})
        this.setState({
            todos:this.state.todos.filter((item,index)=>index != idx)
        }
   )}
   renderTodos=(done)=>{
       return  this.state.todos.map((todo,idx)=>{
        if(done == todo.done){
            return <li>
            <input onClick={()=>this.toggle(idx)} checked={done} type='checkbox'/>
            <span dangerouslySetInnerHTML = {{__html:todo.title}}>
                {/* {todo.title} */}
            </span>
            <button onClick={()=>this.delTodo(idx)}>删除</button>
        </li>
        }
     })
   }
   toggle=(idx)=>{
       let newTodos = JSON.parse(JSON.stringify(this.state.todos))
       newTodos[idx].done=!newTodos[idx].done;
       this.setState({
        todos:newTodos
       })
   }

    render() {
        const {todos,inpValue}=this.state;
        let arr1 = todos.filter(item => !!item.done);
            return (
                <div style={{background:'lightgray'}}>
                    <lable htmlFor = "inp">todoList</lable>
                    <input 
                    ref={inp=>this.input=inp} 
                    value={inpValue} 
                    type='text' 
                    onChange={this.handleChange}
                    id = 'inp'
                    />
                    <button onClick={this.addTodo}>添加</button>
            <h2>正在进行{arr1.length}</h2>
                    <ul>{
                        this.renderTodos(true)
                    }
                    </ul>
                    <h2>已经完成</h2>
                    <ul style={{color:'red'}}>{
                        this.renderTodos(false)
                    }
                    </ul>
                </div>
            )
    }
}

export default Control;



// input加value就变成受控组件,所以通过状态更新